<template>
  <div>
    <div>
      <van-nav-bar
          title="提现"
          left-arrow
          @click-left="onClickLeft"
          right-text="提现记录"
          @click-right="gowithdrawrecord"
      />
    </div>
    <div class="way">
      <div>
        <van-cell
            readonly
            clickable
            is-link
            style="text-align: left"
            :value="value"
            title="提现方式"
            @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="showPicker = false"
          />
        </van-popup>
      </div>
      <div v-show="boo">
        <van-cell title="到账银行卡" :value="bankMsg.bank" style="text-align: left"/>
      </div>
    </div>
    <div class="withdrawmoney">
      <van-cell title="提现金额" style="text-align: left"/>
      <van-cell-group>
        <van-field v-model="value2" label="菲律宾索比₱" placeholder="请输入金额" :disabled="disabled" type="number" @change="change"/>
      </van-cell-group>
      <van-button class="button" plain type="info" @click="allmoney" v-show="!disabled">全部</van-button>
      <van-cell title="换算人民币￥" :value="money"  style="text-align: left"/>
      <van-cell title="账户余额" :value="balance+'₱'" style="text-align: left"/>
    </div>
    <div class="message">
      <span>单笔最小限额10.00,单笔最大限额4000.00,每日限额5000.00</span>
    </div>
    <van-button class="button2" color="#189cd5" @click="withdraw">提现</van-button>
    <van-loading size="30px" color="#0094ff" v-show="boo1">加载中...</van-loading>
    <van-popup v-model="open"  closeable
               close-icon="close"
               position="bottom"
               :style="{ height: '45%'}">
      <div style="margin: 10px 0">请输入密码</div>
      <van-button size="large" style="width: 50px;height: 30px;float: left;margin-top: -35px;border: 0" @click="affirm">确认</van-button>
      <!-- 密码输入框 -->
      <van-password-input
          :value="value1"
          :gutter="10"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
          maxlength="6"
          v-model="value1"
          :show="showKeyboard"
      />
    </van-popup>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      value: '',
      value2: '',
      columns: ['银行卡','支票'],
      showPicker: false,
      open: false,
      value1: '',
      showKeyboard: true,
      boo:false,
      bankMsg:{},
      id:'',
      withdrawMsg:{},
      password:'',
      balance:null,
      disabled:false,
      boo1:false,
      rate:'',
      money:null
    }
  },
  mounted() {
    let parse = JSON.parse(localStorage.getItem('login'));
    this.id=parse.registerIp;
    this.password=parse.payPassword
    this.getUserbyId(parse.id)
    this.getbank(this.id)
    this.getExchange()
  },
  methods: {
    change(){
      if(this.value2!=null){
        this.money=this.value2*this.rate
        this.money=this.money.toFixed(2)
      }
    },
    getExchange(){
      axios.get('http://localhost:11219/mine/topup/getexchange').then(res=>{
        this.rate=res.data.referenceRate
      })
    },
    allmoney(){
      this.value2=this.balance
      this.change()
    },
    // 获取用户信息
    getUserbyId(id){
      axios.get('http://localhost:11219/mine/mywallet/getuserdetail/'+this.id).then(res=>{
        this.balance=res.data.accountBalance
        // this.getBankcard()
      })
    },
    // 查询用户绑定信息
    getbank(id){
      axios.get('http://localhost:11219/mine/bankcard/getbankcard/'+id).then(res=>{
        this.bankMsg=res.data
      })
    },
    onClickLeft() {
      this.$router.push({
        path: '/mywallet'
      })
    },
    gowithdrawrecord(){
      this.$router.push({
        path: '/withdrawrecord'
      })
    },
    // 判断该用户是否绑定银行卡
    onConfirm(value) {
      this.money=null
      this.showPicker = false;
      if(value=="银行卡"){
        this.value2=null
        this.disabled=false
        if(this.bankMsg.accountStatus==2){
          this.$toast('请先绑定银行卡');
        }else{
          this.value = value;
          this.boo=true
        }
      }else{
        this.money=null
        this.disabled=true
        this.value = value;
        this.boo=false
        this.value2=1000
        this.change()
      }
    },
    gowithdrawhint(){
      this.open = true;
    },
    // 提现
    withdraw(){
      axios.get('http://localhost:11219/mine/withdraw/getwithdrawmoneybyid/'+this.id).then(res=>{
        this.withdrawMsg.registerIp=this.id
        if(this.value=="银行卡"){
          this.withdrawMsg.withdrawWay=1
        }else{
          this.withdrawMsg.withdrawWay=2
        }
        this.withdrawMsg.money=this.money
        this.withdrawMsg.toBank=this.bankMsg.bank
        if(this.value==null||this.value==''){
          this.$toast('请选择提现方式');
        }else if(this.value2==null||this.value2==''){
          this.$toast('请输入提现金额');
        }else if(this.balance<this.value2){
          this.$toast('余额不足');
        }else if(res.data>=5000){
          this.$toast('此账号已限额');
        }else{
          if(this.value2<10||this.value2>4000){
            this.$toast('单笔最小限额10.00,单笔最大限额4000.00');
          }else{
            this.open=true
          }
        }
      })
    },
    affirm(){
      if(this.value1.length == 6){
        this.open=false
        if(this.value1==this.password){
          this.value1=''
          let balance=this.balance-this.value2
          balance==null?0:balance;
          this.withdrawMsg.balanceAfterRecharging=balance
          this.withdrawMsg.aMoney=this.value2
          console.log(this.withdrawMsg)
          axios.post('http://localhost:11219/mine/withdraw/addwithdrawrecord',this.withdrawMsg).then(res=>{
            if(res.data.code==200){
              this.boo1=true
              let id = res.data.data;
              axios.get('http://localhost:11219/mine/mywallet/withhold/'+this.id+"/"+balance+"/"+id).then(res=>{
                if(res.data.code==200){
                  this.$toast('提现成功');
                  this.value='';
                  this.value2='';
                  this.boo=false
                  this.$router.push({
                    path: '/withdrawhint',
                    query:{
                      id:id
                    }
                  })
                }else{
                  this.$toast('扣款失败');
                }
              })
            }else{
              this.$toast(res.data.message);
            }
          })
        }else{
          this.$toast('密码错误');
          this.value1=''
        }
      }else{
        this.$toast('请输入6位数字');
        this.open=true
        this.value1=''
      }
    }
  }
}
</script>

<style scoped>
.way{
  width: 95%;
  height: 100%;
  margin: 10px auto;
  background-color: white;
}
.way div{
  margin: 3px 0;
}
.button{
  height: 30px;
  border: 0;
  float: right;
  margin-top: -36px;
  margin-right: 5px;
}
.withdrawmoney{
  width: 95%;
  height: 100%;
  margin: 10px auto;
}
.message span{
  font-size: 12px;
  color: #8d929c;
}
.button2{
  width: 90%;
  margin: 20px auto;
}
</style>
